<template>
  <v-content style="background-color: #f5f5f5">
    <div class="mw-column-style" style="width: 3.75rem;margin-bottom:0.49rem;">
      <div class="mw-column-center-style"
           style="width: 100%;height:1.48rem;justify-content: center;background-color: #FFCF0F">
        <div v-if="data.detail.status == -1" class="mw-first-text-color" style="font-size: 0.2rem;font-weight: bold">
          订单已取消
        </div>
        <div v-if="data.detail.status == 0" class="mw-column-center-style">
          <div class="mw-first-text-color" style="font-size: 0.2rem;font-weight: bold;margin-bottom: 0.08rem">待付款！</div>
          <div class="mw-row-style mw-first-text-color" style="font-size: 0.13rem">
            <div>请在</div>
            <div style="color: #ED3D5D">{{parseInt(data.countdown / 60)}}分{{data.countdown % 60}}秒</div>
            <div>内完成支付，超时订单将自动取消</div>
          </div>
        </div>
        <div v-if="data.detail.status == 1" class="mw-column-center-style">
          <div class="mw-first-text-color" style="font-size: 0.2rem;font-weight: bold;margin-bottom: 0.08rem">待收货！</div>
          <div class="mw-row-style mw-first-text-color" style="font-size: 0.13rem">
            <div>请在收到货后，记得来点击确认收货哦！</div>
          </div>
        </div>
        <div v-if="data.detail.status == 2" class="mw-column-center-style">
          <div class="mw-first-text-color" style="font-size: 0.2rem;font-weight: bold;margin-bottom: 0.08rem">完成交易</div>
          <div class="mw-row-style mw-first-text-color" style="font-size: 0.13rem">
            <div>该订单已完成交易，如需售后服务请联系客服</div>
          </div>
        </div>
      </div>

      <div class="mw-main-background-white mw-column-style"
           style="padding:0.15rem;width: 3.45rem;margin-bottom:0.08rem;">
        <div class="mw-first-text-color"
             style="margin-bottom:0.06rem;font-weight: bold;font-size: 0.15rem;width: 3.45rem;line-height: 0.21rem;">
          {{data.detail.address}}
        </div>
        <div class="mw-row-style mw-first-text-color" style="font-size: 0.11rem">
          <div style="margin-right: 0.04rem">{{data.detail.name}}</div>
          <div>{{data.detail.mobile}}</div>
        </div>
      </div>

      <div class="mw-main-background-white mw-column-style"
           style="padding:0.15rem;width: 3.45rem;margin-bottom:0.08rem;">
        <div class="mw-row-spacebetween-style" style="height:0.8rem;margin-bottom: 0.27rem">
          <img :src="data.detail.products[0].goods_image" style="height:0.8rem;width: 0.8rem;object-fit: cover;"/>
          <div class="mw-column-style" style="height:100%;width: 2.45rem;justify-content: space-between">
            <div class="mw-single-line mw-first-text-color" style="font-size:0.15rem">
              {{data.detail.products[0].goods_name}}
            </div>
            <div class="mw-single-line mw-third-text-color" style="font-size:0.13rem">
              {{data.detail.products[0].product_name}}
            </div>
            <div class="mw-single-line mw-first-text-color" style="font-size:0.17rem;font-weight: bold">
              ￥{{data.detail.products[0].product_price}}
            </div>
          </div>
        </div>
        <div class="mw-row-spacebetween-style" style="width: 100%;align-items: center">
          <div class="mw-first-text-color" style="font-size: 0.15rem">付款</div>
          <div style="font-size: 0.17rem;color: #ED3D5D">{{data.detail.pay_amount_text}}</div>
        </div>
      </div>

      <div class="mw-main-background-white mw-column-style"
           style="padding:0.15rem;width: 3.45rem;margin-bottom:0.08rem;font-size: 0.15rem;">
        <div class="mw-first-text-color" style="font-weight: bold;margin-bottom:0.1rem">订单信息</div>
        <div class="mw-row-style" style="margin-bottom:0.1rem;">
          <div class="mw-third-text-color">订单编号：</div>
          <div class="mw-first-text-color">{{data.detail.order_sn}}</div>
        </div>
        <div class="mw-row-style" style="margin-bottom:0.1rem;">
          <div class="mw-third-text-color">支付方式：</div>
          <div class="mw-first-text-color">{{data.detail.pay_name}}</div>
        </div>
        <div class="mw-row-style" style="margin-bottom:0.1rem;">
          <div class="mw-third-text-color">下单时间：</div>
          <div class="mw-first-text-color">{{data.detail.created_at}}</div>
        </div>
        <div class="mw-row-style" style="margin-bottom:0.1rem;">
          <div class="mw-third-text-color">付款时间：</div>
          <div class="mw-first-text-color">{{data.detail.pay_time}}</div>
        </div>
        <div class="mw-row-style">
          <div class="mw-third-text-color">收货时间：</div>
          <div class="mw-first-text-color">{{data.detail.confirm_receipt_time}}</div>
        </div>
      </div>

      <div class="mw-main-background-white mw-column-style" style="padding:0.15rem;width: 3.45rem;font-size: 0.15rem;">
        <div class="mw-first-text-color" style="font-weight: bold;margin-bottom:0.1rem">物流信息</div>
        <div class="mw-third-text-color">{{data.detail.shipping_text_info}}</div>
      </div>

    </div>
    <div v-if="data.detail.status == 0" class="mw-row-spacebetween-style mw-main-background-white"
         style="z-index:90;width:3.45rem;padding:0 0.15rem;position: fixed;left:0;bottom:0;height:0.49rem;align-items: center">
      <div style="color: #ED3D5D;font-size: 0.17rem">应付:{{data.detail.pay_amount_text}}</div>
      <div class="mw-row-style">
        <div @click="data.cancelOrder" class="mw-first-text-color"
             style="margin-right:0.15rem;width:0.8rem;height:0.32rem;line-height:0.32rem;text-align:center;border-radius:0.19rem;border:1px solid rgba(204,204,204,1);font-size: 0.13rem">
          取消支付
        </div>
        <div @click="data.pay" class="mw-first-text-color"
             style="width:0.8rem;height:0.32rem;line-height:0.32rem;text-align:center;border-radius:0.19rem;background-color:rgba(255,207,15,1);font-size: 0.13rem">
          去支付
        </div>
      </div>
    </div>
    <div v-if="data.detail.status == 1" class="mw-row-style mw-main-background-white"
         style="justify-content:flex-end;z-index:90;width:3.45rem;padding:0 0.15rem;position: fixed;left:0;bottom:0;height:0.49rem;align-items: center">
      <div @click="data.ConfirmOrder" class="mw-first-text-color"
           style="width:0.8rem;height:0.32rem;line-height:0.32rem;text-align:center;border-radius:0.19rem;background-color:rgba(255,207,15,1);font-size: 0.13rem">
        确认收货
      </div>
    </div>
  </v-content>

</template>
<script>
  import utils from '../../utils'
  import httputil from '../../httputil'
  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({data: 'orderdetail'}),
      mapRules({store: [{path: 'orderdetail'}], need: [{path: 'orderdetail'}]}),
    ],
    data() {
      return {}
    },
    components: {},
    computed: {},
    created() {

    },
    mounted() {

    },

    methods: {}
  }

</script>
<style>

</style>
